<!--
 * @Author: your name
 * @Date: 2022-04-27 09:35:26
 * @LastEditTime: 2024-11-29 09:36:53
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\views\ActiveCenter\index.vue
-->
<template>
  <div id="container">
    <div class="top">
      <div class="bread">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/active' }"
            >活动中心</el-breadcrumb-item
          >
          <!-- <el-breadcrumb-item>{{ activeTypeTitle }}</el-breadcrumb-item> -->
        </el-breadcrumb>
      </div>
    </div>
    <div class="tapBox">
      <!-- <div class="taps">
        <h4>活动标签：</h4>
        <div class="tap">
          <p :class="{choseTap:activeType == 'all'}" @click="choseFl('all',[],'')">全部</p>
          <p
            v-for="item in acflLists"
            :key="item.id"
            @click="choseFl('hd',item.tag_lists,item.id)"
            :class="{choseTap:activityfl_id == item.id}"
          >
            {{ item.title }}
          </p>
        </div>
      </div> -->
      <!-- <div class="taps" v-if="activeType == 'hd'">
        <h4>活动分类：</h4>
        <div class="tap">
          <p :class="{choseTap:activityfltag_id == 0}" @click="choseBq(0)">全部</p>
          <p v-for="item in bqLists" :key="item.id" :class="{choseTap:activityfltag_id == item.id}" @click="choseBq(item.id)">
            {{ item.title }}
          </p>
        </div>
      </div> -->
      <!-- <div class="taps" v-if="activeType == 'jcjx'">
        <h4>图书：</h4>
        <div class="tap">
          <p :class="{choseTap:kejianbooks_id == 0}" @click="choseTs(0)">全部</p>
          <p v-for="item in bookLists" :key="item.id" :class="{choseTap:kejianbooks_id == item.id}" @click="choseTs(item.id)">
            {{ item.title }}
          </p>
        </div>
      </div> -->
      <!-- <div class="taps">
        <h4>地区：</h4>
        <div class="tap">
          <p :class="{choseTap:provincecode == 0}" @click="choseP(0)">全国</p>
          <p :class="{choseTap:provincecode == 1}" @click="choseP(1)">本校</p>
          <p v-for="item in pacLists" :key="item.provincecode" :class="{choseTap:provincecode == item.provincecode}" @click="choseP(item.provincecode)">
            {{ item.province }}
          </p>
        </div>
      </div> -->
      <div class="taps" style="border: 0">
        <h4>学科：</h4>
        <div class="tap">
          <p v-for="item in classList" :key="item.id" :class="{choseTap:kemu_id == item.id}" @click="choseKm(item.id)">
            {{ item.title }}
          </p>
        </div>
      </div>
    </div>
    <!-- <div class="BqTaps" v-if="activeType == 'hd'">
      <h4>活动分类：</h4>
      <div class="tap">
        <p :class="{choseTap:activityfltag_id == 0}" @click="choseBq(0)">全部</p>
        <p v-for="item in bqLists" :key="item.id" :class="{choseTap:activityfltag_id == item.id}" @click="choseBq(item.id)">
          {{ item.title }}
        </p>
      </div>
    </div> -->
    <!-- <div class="typeChange">
      <h3
        :class="{ chosed: of == item.of }"
        v-for="item in typeChage"
        :key="item.of"
        @click="choseType(item.of)"
      >
        {{ item.title }}
      </h3>
    </div> -->
    <div class="contentBox">
      <div class="content">
        <div class="activeBox" v-for="item in acLists" :key="item.id">
          <div class="pic" >
            <img :src="item.file_url" alt="" @click="goActiveDetails(item.id,'hd')"/>
          </div>
          <div class="actitle" @click="goActiveDetails(item.id,'hd')">
            <h4>{{ item.title }}</h4>
          </div>
          <p>授课专家：{{ item.teacher_title }}</p>
          <div class="bottom" >
            <div
              class="zhuangtai"
              :class="{ novideo: item.end_time * 1000 < new Date().getTime() }"
            >
              <div
                class="time"
                v-if="item.start_time * 1000 > new Date().getTime()"
                style="color: #07a579"
                @click="goActiveDetails(item.id,'hd')"
              >
                <p>开播时间：{{ timeStamp2String(item.start_time * 1000, 9)}}</p>
              </div>
              <div
                class="time"
                v-if="
                  item.start_time * 1000 < new Date().getTime() &&
                  item.end_time * 1000 > new Date().getTime()
                "
                @click="goActiveDetails(item.id,'hd')"
              >
                <img
                  src="../../assets/img/activeNew/activeIndex_new19.gif"
                  alt=""
                />
                <p>直播中</p>
              </div>
              <div
                class="time"
                v-if="
                  item.end_time * 1000 < new Date().getTime()"
                style="color: #cbcbcb; border-color: #cbcbcb"
                @click="goActiveDetails(item.id,'hd')"
              >
                <img
                  src="../../assets/img/activeNew/activeIndex_new12.png"
                  alt=""
                  style="width: 22px; height: 19px"
                />
                <p style="color: #cbcbcb">已结束</p>
              </div>
              <!-- <div
                class="time"
                v-if="
                  item.end_time * 1000 < new Date().getTime() &&
                  item.have_video == 0
                "
                style="border: 0; margin-left: 35px"
                @click="goActiveDetails(item.id,'hd')"
              >
                <img
                  src="../../assets/img/activeNew/activeIndex_new3.png"
                  alt=""
                  style="width: 18px; height: 19px"
                />
                <p style="color: #cbcbcb">活动已结束</p>
              </div> -->
              <!-- 直播未开始 + 未报名 -->
              <div
                class="type"
                v-if="
                  item.bm_status == 0 &&
                  item.start_time * 1000 > new Date().getTime()
                "
                style="color: #07a579"
                @click="baoming(item.id, item.title)"
              >
                预约
              </div>
              <!-- 直播未开始 + 已报名 -->
              <div
                class="type"
                v-if="
                  item.bm_status == 1 &&
                  item.start_time * 1000 > new Date().getTime()
                "
                style="background-color: #07a579"
                @click="goActiveDetails(item.id,'hd')"
              >
                已预约
              </div>
              <!-- 直播已开始还没结束 -->
              <div
                class="type"
                v-if="
                  item.start_time * 1000 < new Date().getTime() &&
                  item.end_time * 1000 > new Date().getTime()
                "
                style="color: #07a579"
                @click="goActiveDetails(item.id,'hd')"
              >
                进入直播
              </div>
              <!-- 直播已结束 + 有回放 -->
              <div
                class="type"
                v-if="
                  item.end_time * 1000 < new Date().getTime()"
                style="color: #07a579"
                @click="goActiveDetails(item.id,'hd')"
              >
                查看回放
              </div>
            </div>
          </div>
          <div class="bottom" v-if="item.type_str == 'jcjx'">
                <div class="zhuangtai" :class="{ novideo: true }">
                  <div
                    class="time"
                    style="color: #cbcbcb; border-color: #cbcbcb"
                    @click="goActiveDetails(item.id,item.type_str)"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new12.png"
                      alt=""
                      style="width: 22px; height: 19px"
                    />
                    <p style="color: #cbcbcb">已结束</p>
                  </div>
                  <!-- 直播已结束 + 有回放 -->
                  <div
                    class="type"
                    style="color: #07a579"
                    @click="goActiveDetails(item.id,item.type_str)"
                  >
                    查看回放
                  </div>
                </div>
              </div>
        </div>
        <div class="noclass" v-if="noclassShow">
          <img src="../../assets/img/activeNew/noclass.png" alt="">
          <p>暂无相关内容</p>
        </div>
      </div>
    </div>
      <!-- 报名时个人信息不完善，提交信息弹窗 -->
      <UserInfoBox v-if="userMsgShow" :yymsg="yymsg" @openSuccessTc = "openSuccessTc"></UserInfoBox>
      <!-- 预约成功弹窗 -->
      <YuyueBox v-if="signSuccess" :yymsg="yymsg" @closeYytc = "closeYytc"></YuyueBox>
  </div>
</template>

<script>
import LivePlayer from "@liveqing/liveplayer"; // vue2
import YuyueBox from "../../components/yuyueBox/yuyueBox.vue"; // vue2
import UserInfoBox from "../../components/userInfoBox/userInfoBox.vue"; // vue2
import { timeStamp2String } from "../../utils/time";
import {
  userinfo,
  kemulists,
  list_activityfl,
  list_activitypca,
  bookslists,
  nowkemu,
  activityindex_lists,
  bm_activity,
  list_zbhd_index,
  list_zbhd,
} from "../../api/http";

export default {
  components: {
    LivePlayer,
    UserInfoBox,
      YuyueBox
  },
  inject: ["reload"],
  data() {
    return {
      timeStamp2String,
      activeType: "", //视频类型
      activeTypeTitle: "", //视频类型
      kemu_id: "", //科目id
      kejianversions_id: "", //版本id
      kejianbooks_id: "", //书本id
      activityfl_id: "", //活动分类id
      activityfltag_id: "", //活动标签id
      provincecode: "0", //省份code
      leixing: "", //选择的活动分类
      nianji_id: "9", //年级id
      school_id: "34182",
      typeChage: [
        { of: "time", title: "最新活动" },
        { of: "view_nums", title: "最热活动" },
      ], //最新和热门切换
      of: "time", //选中的活动类型
      acflLists: [], //分类标签列表
      bqLists:[],//活动标签列表
      pacLists: [], //省份列表
      classList: [], //科目列表
      bookLists: [], //书本列表
      acLists: [], //活动列表
      noclassShow:false,//无课程活动展示空图

      yymsg:{},//预约成功信息
      userMsgShow:false,//报名时完善信息弹窗
      signSuccess: false, //报名弹窗显示隐藏
    };
  },
  created() {
    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    //query参数
    console.log(this.$route.query, "query");
    const query = this.$route.query
    this.activeType = query.type;
    this.activeTypeTitle = query.typeTitle;
    if(query.typeTitle){ this.activeTypeTitle = query.typeTitle;}
    // if(query.kejianbooks_id){this.kejianbooks_id = query.kejianbooks_id}
    if(query.activityfl_id){this.activityfl_id = query.activityfl_id}
    // if(query.activityfltag_id){this.activityfltag_id = query.activityfltag_id}

    
    nowkemu({ md5key: localStorage.getItem("md5key") }).then((res) => {
      console.log(res, "当前科目和版本");
      const data = res.retRes;
      this.kemu_id = data.kemu_id;
      this.kejianversions_id = data.kejianversions_id;
      this.nianji_id = data.nianji_id;
      this.getkemu(); //获取科目列表
      // this.getAcFl(); //获取活动分类及标签
      // this.getPac(); //获取活动省份列表
      // this.getBookList(); //获取书本列表
      this.getActives(); //活动列表
    });
  },
  mounted() {},

  methods: {
    //获取科目列表
    getkemu() {
      // kemulists({ md5key: localStorage.getItem("md5key") }).then((res) => {
      //   console.log(res, "科目列表");
      //   const data = res.retRes;
      //   if (res.retInt == 1) {
      //     this.classList = data;
      //   }
      // });
      list_zbhd_index().then((res) => {
        const data = res.retRes;
        this.classList = [];
        data.forEach((item) => {
          this.classList.push({ id: item.id, title: item.title });
        });
      });
    },
    //获取活动省份列表
    getPac() {
      list_activitypca({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        console.log(res, "活动省份");
        this.pacLists = res.retRes;
      });
    },
    //获取活动分类及标签
    getAcFl() {
      list_activityfl({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
      }).then((res) => {
        const data = res.retRes;
        console.log(res, "活动分类及标签");
        this.acflLists = data;
        console.log(data,"1111")
        data.forEach(item=>{
          if(item.id == this.activityfl_id){
            this.bqLists = item.tag_lists
          }
        })
      });
    },
    //获取书本列表
    getBookList() {
      bookslists({
        md5key: localStorage.getItem("md5key"),
        kejianversions_id: this.kejianversions_id,
        kemu_id: this.kemu_id,
        nianji_id: this.nianji_id,
      }).then((res) => {
        console.log(res, "书本列表");
        this.bookLists = res.retRes;
      });
    },
    //获取活动列表
    getActives() {
      // activityindex_lists({
      //   md5key: localStorage.getItem("md5key"),
      //   type_str: 'hd', //hd  or jcjx
      //   kemu_id: this.kemu_id,
      //   kejianversions_id: this.kejianversions_id,
      //   kejianbooks_id:this.kejianbooks_id,
      //   // kejianchapters_id:this.kejianchapters_id,
      //   activityfl_id: this.activityfl_id,
      //   activityfltag_id: this.activityfltag_id,
      //   provincecode:this.provincecode == 0?'':this.provincecode == 1?'':this.provincecode,
      //   school_id:this.provincecode == 1?this.school_id:'',
      //   of: this.of,
      // }).then((res) => {
      //   const data = res.retRes;
      //   this.acLists = data;
      //   if(this.acLists.length == 0){
      //     this.noclassShow = true
      //   }else{
      //     this.noclassShow = false
      //   }
      // });
      list_zbhd({
        kemu_id:this.kemu_id,
        zb_status_arr:this.$route.query.zb_status == 1?[1,2]:[3],
      }).then((res) => {
        let data = res.retRes;
        // data.forEach((item) => {
        //   this.acLists.push(item);
        // });
        this.acLists = data;
        if(this.acLists.length == 0){
          this.noclassShow = true
        }else{
          this.noclassShow = false
        }
      });
    },
    //选择活动类的类型
    choseFl(type,list,id) {
      console.log(type,list,id)
      if(type == 'all'){
        this.activeType = 'all';
        this.kejianbooks_id = 0;
        this.activityfl_id = 0;
        this.activityfltag_id = 0;
        this.getActives();
      }
      else if(type == 'jcjx'){
        this.activeType = 'jcjx';
        this.kejianbooks_id = 0;
        this.activityfl_id = 0;
        this.activityfltag_id = 0;
        this.getActives();
      }
      else if(list){
        console.log(id)
        this.activeType = 'hd';
        this.bqLists = list;
        this.activityfl_id = id
        this.kejianbooks_id = 0;
        this.activityfltag_id = 0;
        this.getActives();
      }
    },
    //选中图书
    choseTs(id){
      this.kejianbooks_id = id;
      this.getActives();
    },
    //选中标签
    choseBq(id){
      this.activityfltag_id = id;
      this.getActives();
    },
    //选中省
    choseP(id){
      this.provincecode = id;
      this.getActives();
    },
    //选中科目
    choseKm(id){
      this.kejianbooks_id = 0
      this.kemu_id = id;
      this.getActives();
    },
    //选择最新最热？
    choseType(of){
      this.of = of;
      this.getActives();
    },
    //时间换算
    formatSeconds(value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      var result = "" + parseInt(secondTime) + "s";

      if (minuteTime > 0) {
        result = "" + parseInt(minuteTime) + "m" + result;
      }
      if (hourTime > 0) {
        result = "" + parseInt(hourTime) + "h" + result;
      }
      // console.log('result',result);
      return result;
    },
    //报名 预约
    baoming(id, title) {
      this.yymsg.title = title;
      this.yymsg.active_id = id;
      //获取用户信息用于报名
      userinfo({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res);
          const data = res.retRes;
          if (data.jbxx_set == 0) {
            this.userMsgShow = true;
          } else {
            bm_activity({
              md5key: localStorage.getItem("md5key"),
              activity_id: id,
              school_id: data.school_id,
              kemu_id: data.kemu_id,
              nianji_id: data.nianji_id,
              zhiwu_id: data.zhiwu_id,
              is_bzr: JSON.stringify(data.is_bzr),
              title: this.title,
              true_name: data.true_name,
              account: data.account,
              provincecode: data.provincecode,
              citycode: data.citycode,
              areacode: data.areacode,
            }).then((res) => {
              if (res.retInt == 1) {
                console.log(res, "报名成功");

                kemulists({
                  md5key: localStorage.getItem("md5key"),
                }).then((res) => {
                  res.retRes.forEach((item) => {
                    if (this.kemu_id == item.id) {
                      this.yymsg.file_url = item.gzh_file_url;
                      this.yymsg.kemu_id = this.kemu_id;
                      this.signSuccess = true;
                    }
                  });
                });

                // this.reload();
              }
            });
          }
        }
      });
    },
    //关闭弹窗
    closeYytc(){
      this.signSuccess = false;
      this.getActives();
    },
    //组件报名成功
    openSuccessTc(){
      kemulists({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        res.retRes.forEach((item) => {
          if (this.kemu_id == item.id) {
            this.yymsg.file_url = item.gzh_file_url;
            this.yymsg.kemu_id = this.kemu_id;
            this.signSuccess = true;
          }
        });
      });
    },
    //去活动详情
    goActiveDetails(id,type) {
      let { href } = this.$router.resolve({
        path: "/active/fullScreen",
        query: {
          id: id,
          type:type,
          from:'活动中心'
        },
      });
      window.open(href, "activeRes");
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 740px;
  margin: 0 auto;
  margin-top: 40px;
}
.el-pagination {
  text-align: center;
  /* margin: 20px 80px 20px 0; */
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}
.el-dialog__headerbtn {
  /* color: #08a579; */
  position: absolute;
  top: 20px;
  right: 40px;
  width: 0;
  height: 0;
}
.el-dialog__headerbtn .el-dialog__close:hover {
  color: #08a579;
}
/* 用于弹窗 */
.el-button:hover {
  background: #fff;
  border-color: #08a579;
  color: #333;
}
.el-button--primary {
  background: #08a579 !important;
  border-color: #08a579 !important;
}
.el-button--primary:hover {
  background: #08a579 !important;
  border-color: #08a579;
  color: #fff;
}
/* .el-icon-close:before {
  color: #08a579;
} */

/* 用于图片预览大图关闭按钮 */
.el-image-viewer__btn {
  opacity: 1;
}
</style>
<style lang="less" scoped>
#container {
  background-color: #f0f2f5;
  .top {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      // font-weight: 400;
      color: #626366;
      line-height: 24px;
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
          }
        }
        /deep/.el-breadcrumb__inner.is-link {
          font-weight: normal;
        }
      }
    }
  }
  .tapBox {
    margin: 0 auto;
    width: 1200px;
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    .taps {
      display: flex;
      //   align-items: center;
      margin-left: 30px;
      margin-top: 18px;
      padding-bottom: 17px;
      width: 1140px;
      //   line-height: 75px;
      border-bottom: 1px solid #dee0e3;
      h4 {
        margin-left: 25px;
        width: 90px;
        // text-align: right;
        font-size: 18px;
        line-height: 40px;
        color: #3c3c3c;
        font-weight: normal;
      }
      .tap {
        display: flex;
        flex-wrap: wrap;
        width: 1000px;
        cursor: pointer;
        p {
          margin: 0 20px;
          line-height: 40px;
          font-size: 16px;
          color: #3c3c3c;
        }
        p:hover {
          font-weight: bold;
          color: #08a579;
        }
        .choseTap{
          font-weight: bold;
          color: #08a579;
        }
      }
    }
  }
  .BqTaps{
    display: flex;
    margin: 0 auto;
    margin-top: 20px;
    width: 1200px;
    h4 {
      margin-left: 54px;
      width: 90px;
      text-align: right;
      font-size: 18px;
      line-height: 40px;
      color: #3c3c3c;
      font-weight: normal;
    }
    .tap {
      display: flex;
      flex-wrap: wrap;
      width: 1000px;
      cursor: pointer;
      p {
        margin: 0 20px;
        line-height: 40px;
        font-size: 16px;
        color: #3c3c3c;
      }
      p:hover {
        font-weight: bold;
        color: #08a579;
      }
      .choseTap{
        font-weight: bold;
        color: #08a579;
      }
    }
  }
  .typeChange {
    display: flex;
    align-items: center;
    margin: 40px auto;
    width: 1200px;
    border-bottom: 1px solid #dee0e3;
    h3 {
      margin-right: 70px;
      padding-bottom: 12px;
      font-size: 18px;
      color: #3c3c3c;
      font-weight: normal;
      cursor: pointer;
    }
    .chosed {
      font-weight: 600;
      color: #08a579;
      font-size: 24px;
      border-bottom: 2px solid #08a579;
    }
  }
  .contentBox {
    margin: 0 auto;
    margin-top: 40px;
    width: 1200px;
    .content {
      display: flex;
      flex-wrap: wrap;
      .activeBox {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-right: 20px;
        margin-bottom: 30px;
        width: 284px;
        height: 360px;
        background: #ffffff;
        border-radius: 15px 15px 15px 15px;
        .pic {
          width: 284px;
          height: 166px;
          // background: #989898;
          border-radius: 15px 15px 0px 0px;
          cursor: pointer;
          img {
            width: 100%;
            max-height: 100%;
            border-radius: 15px 15px 0px 0px;
          }
        }
        .actitle {
          margin: 16px 30px 18px 20px;
          font-size: 16px;
          width: 240px;
          cursor: pointer;
          h4 {
            line-height: 24px;
            color: #333;
            height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;  // 控制多行的行数
            -webkit-box-orient: vertical; 
          }
        }
        .actitle:hover{
          h4{
            color: #08a579;
          }
        }
        p {
          margin-left: 20px;
          font-size: 14px;
          color: #656565;
        }
        .bottom {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 75px;
          border-top: 1px solid #eff1f5;
          .zhuangtai {
            display: flex;
            // justify-content: center;
            align-items: center;
            margin-left: 20px;
            margin-top: 20px;
            border-radius: 12px;
            font-size: 14px;
            width: 242px;
            height: 35px;
            border: 1px solid #07a579;
            cursor: pointer;
            .time {
              display: flex;
              align-items: center;
              justify-content: center;
              // margin-left: 14px;
              // padding-right: 16px;
              text-align: center;
              border-right: 1px solid #07a579;
              width: 170px;
              height: 35px;
              line-height: 35px;
              img {
                width: 14px;
              }
              p {
                margin-left: 5px;
              }
            }
            .type {
              width: 72px;
              text-align: center;
              height: 35px;
              line-height: 35px;
              // background-color: #07a579;
              border-radius: 0 10px 10px 0;
              cursor: pointer;
            }
          }
          .novideo {
            border: 1px solid #cbcbcb;
          }
        }
      }
      .activeBox:nth-of-type(4n) {
        margin-right: 0;
      }
      .noclass{
        margin: 0 auto;
        margin-bottom: 100px;
        width: 1200px;
        text-align: center;
        img{
          width: 300px;
        }
        p{
          margin-top: 30px;
          font-size: 24px;
          color: #666;
        }
      }
    }
  }
}
</style>
